// vue.config.js
const pro = process.env.NODE_ENV === 'production';
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const configureWebpack = config => {
    if (process.env.NODE_ENV === 'production') {
        let optimization = {
            runtimeChunk: 'single',
            // 将每个依赖包打包成单独的js文件
            splitChunks: {
                chunks: 'all',
                maxInitialRequests: Infinity,
                minSize: 20000,
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name (module) {
                            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1]
                            return `npm.${packageName.replace('@', '')}`
                        }
                    }
                }
            },
            minimizer: [
                // 插件配置移除console
                new TerserPlugin({
                    terserOptions: {
                        ecma: undefined,
                        warnings: false,
                        parse: {},
                        compress: {
                            drop_console: true,
                            drop_debugger: false,
                            pure_funcs: ['console.log']
                        }
                    },
                }),
            ],
        }
        Object.assign(config, {
            optimization
        })
    }
    Object.assign(config, {
        // 别名配置
        resolve: {
            alias: {
                '@': path.resolve(__dirname, './src'),
            },
            extensions:['.js','.vue','.css','.scss']
        },
        // 不使用webpack处理编译的依赖库，通过CMD、AMD、window全局方式使用
        externals: {
            jQuery: 'jQuery',
            $: 'jQuery',
            echarts: 'echarts',
            lodash: '_'
        }
    })
}
const chainWebpack = config => {
    config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
        return options
    })
}
module.exports = {
    publicPath: './',
    outputDir: 'dist',                  // 打包的目录
    indexPath: 'index.html',            // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径
    filenameHashing: true,              // 生成的静态资源文件名是否带有哈希值
    lintOnSave: true,                   // 在保存时校验格式
    runtimeCompiler: false,             // 是否使用包含运行时编译器的 Vue 构建版本
    productionSourceMap: false,         // 生产环境是否生成 SourceMap
    integrity: false,                   // 是否启用SRI，当构建后的文件部署在CDN上时，建议开启
    css: {
        modules: false,                 // 是否将所有的 *.(css|scss|sass|less|styl(us)?) 文件视为 CSS Modules 模块
        extract: pro,                   //是否将组件中的 CSS 提取至一个独立的 CSS 文件中
        sourceMap: false,               // 是否为 CSS 开启 source map
        loaderOptions: {}
    },
    devServer: {
        host: 'localhost',
        port: 8080,                       // 服务端口
        https: false,
        hotOnly: true,
        proxy: {                          // 设置代理：指向开发环境 API 服务器的字符串
            '/api': {
                target: 'http://127.0.0.1:3000',
                ws: true,
                changeOrigin: true,
                secure:true,
                pathRewrite: {
                    '^/api': ''
                }
            },
        },
    },
    // 其他webpack配置
    configureWebpack: config => {
        configureWebpack(config)
    },
    // 对内部的webpack配置进行更细粒度的修改，
    chainWebpack: config => {
        chainWebpack(config)
    }
};
